<template>
	<view class="city">
		<view class="line"></view>
		<view v-for="item in cityArr" :key="item.city_id?item.city_id:item.district_id" class="list" @click="changeCity(item)" >
			<text>{{item.city_name?item.city_name:item.district_name}}</text>
		</view>
	</view>
</template>

<script setup>
	import {data as cityList } from "../../json/area_city.js"
	import {data as districtList} from "../../json/area_district.js"
	import {onLoad} from "@dcloudio/uni-app"
	let cityArr=[]
	let area=""
	onLoad((option)=>{
		area=option.provice_name
		let provinceId=option.province_id
		cityArr=cityList.filter((item)=>item.province_id===provinceId)
		//北京1、天津2、上海9、重庆22，他们需要从区中获得，作为给用户展示并且可以更具体的选择
		if(provinceId == 1 || provinceId == 2 || provinceId == 9 || provinceId == 22){
			let cityId=cityArr[0].city_id
			cityArr=districtList.filter((item)=>item.city_id===cityId)
		}
	})
	const changeCity=(item)=>{
		area+=item.city_name
		uni.setStorageSync('areaName',area)
		uni.navigateBack({
			delta:2
		})
	}
</script>

<style scoped lang="scss">
		.line{
		   height: 1px;
		   background-color: #252731;
		}
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx;
		}
	       .line{
	          height: 1px;
	          background-color: #252731;
	       }
	       .list{
	       	padding:20rpx;
	       }
</style>
